<template>
	<div>
		<div v-for="item in list" class="koko">
			<img :src="`http://127.0.0.1:80/api/public/showimg/${item.pic}`" />
			<div>
				<p>{{item.name}}</p>
				<br />
				<p style="font-size: 10px;">{{item.author}}</p>
				<p style="font-size: 10px;">{{item.maker}}</p>
				<br />
				<p style="font-size: 12px;">{{item.info}}</p>
				<p>￥{{item.price}}</p>
			</div>
			<div class="koko2">
				<el-button style="background-color: darkgray;">详情</el-button>
				<el-button style="background-color: darkorange;">购买</el-button>
			</div>
		</div>
		<el-pagination style="margin-left: 40%; margin-top: 30px;" :page-size="num" @current-change="change"
			:current-page="page" background layout="prev, pager, next" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		name: 'allbook2',
		data() {
			return {
				list: [],
				page: 1,
				num: 5,
				total: 0,
			}
		},
		methods: {
			show() {
				this.$axios.get('http://127.0.0.1:80/api/public/findPageBook/' + this.page + '/' + this.num + '/0').then((
					resp) => {
					this.list = resp.data.data.books;
					console.log(this.list);

					console.log(resp.data.data.total);
					this.total = resp.data.data.total;
				})
			},
			change(val) {
				console.log("页面更新数据值:" + val);
				this.page = val;
				this.show();
			},
		},
		mounted() {
			this.show();
		}
	}
</script>

<style>
	.koko {
		width: 50%;

		margin-left: 30%;
		margin-top: 1%;
		display: flex;
	}

	.koko img {
		width: 120px;
		height: 150px;
	}

	.koko2 {
		text-align: right;
	}

	.koko2 button {
		border: none;
		color: white;
	}
</style>